<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-14 14:35:11
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-10-31 15:15:19
 * @FilePath: \robot\src\views\patroling\PatrolingSettingDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #header>
      <div class="text-center text-3xl font-bold">
        {{ title }}
      </div>
    </template>
    <el-form :form="formData" label-width="120px">
      <el-form-item
        v-for="item in formOptions"
        :key="item.prop"
        :label="item.label"
      >
        <el-select
          v-if="item.type === 'select'"
          v-model="formData[item.prop]"
          class="select"
          :disabled="item.disabled && item.disabled(formData)"
          v-bind="item.attributes || {}"
          v-on="item.events || {}"
          @change="changeCountry($event)"
        >
          <el-option
            v-for="opt in item.options"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
        <el-switch
          v-else-if="item.type === 'switch'"
          v-model="formData[item.prop]"
          active-color="#ff931e"
          :disabled="item.disabled && item.disabled(formData)"
          v-bind="item.attributes || {}"
          v-on="item.events || {}"
        />
        <el-date-picker
          v-else-if="item.type === 'datePicker'"
          v-model="formData[item.prop]"
          type="datetime"
          placeholder="请选择"
          :default-value="new Date()"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DDTHH:mm"
          size="small"
        />
        <el-input
          v-else
          v-model="formData[item.prop]"
          :disabled="item.disabled && item.disabled(formData)"
          size="small"
          v-bind="item.attributes || {}"
          v-on="item.events || {}"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="flex">
        <div
          class="flex-1 bg-[#1f3947] text-center text-white cursor-pointer text-xl py-3 rounded mr-5"
          @click="handleClose"
        >
          取消
        </div>
        <div
          class="flex-1 bg-[#ff931e] text-center text-white cursor-pointer text-xl py-3 rounded"
          @click="handleConfirm"
        >
          确定
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { toRefs } from "vue";
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
  formOptions: {
    type: Array,
    default: () => [],
  },
  formData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:visible", "confirm"]);

const { visible, formData } = toRefs(props);

function handleClose() {
  emit("update:visible", false);
}
function handleConfirm() {
  emit("update:visible", false);
  emit("confirm", formData.value);
}
</script>
